/* eslint-disable no-mixed-operators */
import React from 'react';
import { Drawer } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import Container from 'components/Container';

import EditDrawer from './EditDrawer/PlayEditDrawer';

import styles from './index.module.less';

const DrawerCom = ({
  visible,
  appList,
  scriptList,
  type,
  nodeInfo,
  setVisible,
  workFlow,
  setWorkFlow,
}) => {
  const [action, setAction] = React.useState();
  const [paramList, setParamList] = React.useState();

  let title = '';
  const appReg = /app="[-_a-zA-Z0-9]*"/;
  const app = nodeInfo.model?.action?.match(appReg)&&nodeInfo.model?.action?.match(appReg)[0].replace(/(app=|")/g, '');

  if (nodeInfo && nodeInfo.model) {
    if (nodeInfo.model.label === '流程开始') {
      title = '开始节点';
    } else if (nodeInfo.model.label === '流程结束') {
      title = '结束节点';
    } else if (nodeInfo.currentShape === 'diamond') {
      title = '分支判断';
    } else if (nodeInfo.model.nodeType === 'app') {
      title = 'APP 节点';
    } else {
      title = '脚本节点';
    }
  }

  React.useEffect(() => {
    if (nodeInfo && nodeInfo.model && type === 'view') {
      const reg = /=<%\s\$\.[_a-zA-Z0-9]*\s%>/g;
      // const reg = /=<%\s\$\.[<_a-zA-Z0-9\s%>]*/g;
      const nodeInfoArr = nodeInfo.model.action.replace(reg, '').split(' ');
      // 第一个是action 最后两个不知道是啥
      setAction(nodeInfoArr.shift());
      nodeInfoArr.pop();
      nodeInfoArr.pop();
      nodeInfoArr.pop();
      nodeInfoArr.pop();
      nodeInfoArr.pop();
      setParamList(nodeInfoArr);
    }
  }, [nodeInfo, type]);

  const onClose = () => {
    setVisible(false);
  };

  const renderViewDraw = () => (
    <>
      <Container className={styles.drawBody}>
        <Container className={styles.info}>
          <span className={styles.label}>
            节点名称：
          </span>
          <span>
            {nodeInfo.model.label}
          </span>
        </Container>
        {nodeInfo.id !== 'start' && nodeInfo.id !== 'end' && (
          <Container className={styles.info}>
            <span className={styles.label}>
              节点描述：
            </span>
            <span>
              {nodeInfo.model.allDescription}
            </span>
          </Container>
        )}
        {app && (
          <Container className={styles.info}>
            <span className={styles.label}>
              APP：
            </span>
            <span>
              {appList.find(item => item.id === app).display}
            </span>
          </Container>
        )}
        <Container className={styles.info}>
          <span className={styles.label}>
            动作：
          </span>
          <span>
            {app ? appList?.find(item => item.id === app)?.script.commands.find(item => item.name === action)?.display : nodeInfo?.model?.nodeType === 'script' && scriptList?.find(item => item.name === action)?.display || action}
          </span>
        </Container>
        {paramList && paramList.map(item => (
          <Container key={item} className={styles.info}>
            <span className={styles.label}>
              参数：
            </span>
            <span>
              {item}
            </span>
          </Container>
        ))}
      </Container>
    </>
  );

  const renderEditDraw = () => (
    <EditDrawer
      nodeInfo={nodeInfo}
      visible={visible}
      workFlow={workFlow}
      appList={appList}
      scriptList={scriptList}
      setWorkFlow={setWorkFlow}
      onClose={onClose}
    />
  );

  return (
    <div className={styles.drawer}>
      <Drawer
        placement="right"
        width="300px"
        closable={false}
        onClose={onClose}
        visible={visible}
        mask={false}
        getContainer={false}
        drawerStyle={{
          color: '#E7EFFF',
          background: '#262E3C',
        }}
      >
        <Container flex justify="space-between" alignItems="center" className={styles.drawHeader}>
          <span>
            {title}
          </span>
          <CloseOutlined onClick={onClose} style={{ cursor: 'pointer' }} />
        </Container>
        {type === 'view' && nodeInfo && nodeInfo.model && renderViewDraw()}
        {type === 'edit' && nodeInfo && nodeInfo.model && renderEditDraw()}
      </Drawer>
    </div>
  );
};

export default DrawerCom;
